<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Global Mall</title>
    <link rel="icon" href="assets/image/logo/favicon.png" type="image/png" sizes="32x32">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.min.css">
    <link rel="stylesheet" type="text/css" href="assets/fonts/css2.css">
    <link rel="stylesheet" type="text/css" href="assets/css/jquery.fancybox.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
</head>

<body>
    <div class="preloader"></div>
    <button id="myBtn" title="Go to top"></button>
    <?php
    // 引入数据库连接
    include 'conn.php';
    include 'header.php';
    if (!isset($_SESSION['user_id'])) {
        echo "<script>alert('请先登录！');window.location.href='login.php';</script>";
        exit;
    }
    ?>
    <!-- login page -->
    <div class="mb-3 mt-3">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <ul class="breadcums">
                        <li class="d-inline-block font-weight-bolder button-group2">
                            <a href="index.php" class="login_txt symbol2 pro_home"></a>
                        </li>
                        <li class="d-inline-block hr_ font-weight-bolder"><a href="#" class="login_txt">我 的 订 单</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container order-page">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header order_header bg-white">
                        <div class="card-title mb-0">
                            <div class="row">
                                <div class="col-12">
                                    <h5 class="mb-0"><i class="fas fa-box"></i>&nbsp;&nbsp;我的订单</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body order_body">
                        <?php
                        // 获取当前登录用户的订单信息
                        $user_id = $_SESSION['user_id']; // 假设用户已登录
                        $order_sql = "SELECT o.*, p.name, p.image, p.price FROM orders o
                              LEFT JOIN products p ON o.product_id = p.id
                              WHERE o.user_id = $user_id
                              ORDER BY o.date DESC";
                        $order_result = $conn->query($order_sql);

                        if ($order_result->num_rows == 0): ?>
                            <div class="text-center">
                                <img src="assets/image/svg/cart.svg" alt="empty order" class="img-fluid" style="width: 150px;height:auto;margin-bottom:10px;">
                                <p>您还没有订单，赶紧去购物吧！</p>
                            </div>
                        <?php else: ?>
                            <?php while ($order = $order_result->fetch_assoc()): ?>
                                <div class="row order-item" data-order-id="<?= $order['id'] ?>">
                                    <div class="col-12 col-md-6 pr-0">
                                        <div class="d-flex">
                                            <div class="col-xl-4 col-lg-5 col-md-4 col-4 px-0">
                                                <a href="#"><img src="<?= $order['image'] ?>" class="mx-auto d-block img-fluid" alt="product" style="width:100px;height:auto;"></a>
                                            </div>
                                            <div class="col-xl-8 col-lg-7 col-md-8 col-8 pr-0">
                                                <h2 class="product-name font-weight-bold mt-sm-2 mt-md-2" style="font-size: 16px;"><a href="#"><?= $order['name'] ?></a></h2>
                                                <div><span class="font-weight-bolder">￥<?= number_format($order['price'], 2) ?></span></div>
                                                <div class="my-1 f_13">
                                                    <span>数量:</span>
                                                    <span><?= $order['quantity'] ?></span>
                                                </div>
                                                <div class="my-1 f_13">
                                                    <span>支付方式:</span>
                                                    <span><?= $order['method'] ?></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 mt-4">
                                        <div class="d-flex">
                                            <div class="wodeorder">
                                                <span class="font-weight-bold">￥<?= number_format($order['total'], 2) ?></span>
                                            </div>
                                            <div class="col-md-3 col-sm-4 col-3 my-2 mt-1 text-right text-md-left">
                                                <?php if ($order['status'] == 0): ?>
                                                    <!-- 未评价 -->
                                                    <a href="javascript:void(0);" class="open-review-modal" data-order-id="<?= $order['id'] ?>"><i class="fas fa-pen"></i> 去评价</a>
                                                <?php elseif ($order['status'] == 1): ?>
                                                    <!-- 已评价 -->
                                                    <a href="javascript:void(0);" class="view-review-btn" data-order-id="<?= $order['id'] ?>"><i class="fas fa-eye"></i> 查看评价</a>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                            <?php endwhile; ?>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 查看评价模态框 -->
    <div class="modal fade" id="viewReviewModal" tabindex="-1" aria-labelledby="viewReviewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewReviewModalLabel">订单评价</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p><strong>评分：</strong>
                        <span id="review-stars" class="text-warning"></span>
                    </p>
                    <br>
                    <p><strong>评价内容：</strong></p>
                    <p id="review-content" class="border p-2 rounded" style="background:#f8f9fa;"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框部分 -->
    <div class="modal fade" id="reviewModal" tabindex="-1" role="dialog" aria-labelledby="reviewModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form action="submit_review.php" method="POST" id="reviewForm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">发布评价</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="order_id" id="order_id" value="">
                        <div class="form-group">
                            <label>星级评价：</label>
                            <div id="star-rating">
                                <i class="fas fa-star star" data-rating="1"></i>
                                <i class="fas fa-star star" data-rating="2"></i>
                                <i class="fas fa-star star" data-rating="3"></i>
                                <i class="fas fa-star star" data-rating="4"></i>
                                <i class="fas fa-star star" data-rating="5"></i>
                            </div>
                            <input type="hidden" name="rating" id="rating" value="0">
                        </div>

                        <div class="form-group">
                            <label>评价内容：</label>
                            <textarea name="content" class="form-control" rows="4" placeholder="请输入评价内容..." required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success">提交评价</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <?php
    include 'footer.php';
    ?>
    </script>
    <script src="assets/js/jquery-3.4.1.min.js"></script>
    <script src="assets/js/owl.carousel.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.fancybox.min.js"></script>
    <script src="assets/js/custom.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <!-- 脚本部分 -->
    <script>
        $(document).ready(function() {
            // 打开模态框 & 传递订单ID
            $('.open-review-modal').click(function() {
                var orderId = $(this).data('order-id');
                $('#order_id').val(orderId);
                $('#reviewModal').modal('show');
            });

            // 评分星星点击事件
            $('#star-rating .star').click(function() {
                var rating = $(this).data('rating');
                $('#rating').val(rating);
                $('#star-rating .star').removeClass('text-warning');
                $('#star-rating .star').each(function(index) {
                    if (index < rating) {
                        $(this).addClass('text-warning');
                    }
                });
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('.view-review-btn').click(function() {
                var orderId = $(this).data('order-id');
                $.ajax({
                    url: 'get_review.php',
                    type: 'POST',
                    data: {
                        order_id: orderId
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.success) {
                            // 渲染星星
                            var rating = parseInt(response.data.rating);
                            var starsHtml = '';
                            for (var i = 1; i <= 5; i++) {
                                if (i <= rating) {
                                    starsHtml += '<i class="fas fa-star"></i> '; // 实心星
                                } else {
                                    starsHtml += '<i class="far fa-star"></i> '; // 空心星
                                }
                            }
                            $('#review-stars').html(starsHtml);
                            $('#review-content').text(response.data.content);
                        } else {
                            $('#review-stars').html('无评分');
                            $('#review-content').text('未找到评价信息');
                        }
                        $('#viewReviewModal').modal('show');
                    },
                    error: function() {
                        alert('获取评价失败，请稍后重试！');
                    }
                });
            });
        });
    </script>


</body>

</html>